import React from "react";
import { Button, Popover, Space } from "antd";
import InnerFieldsTree from "./InnerFieldsTree";
import ImportJSONModal from "./ImportJSONModal";
import { Field } from "src/utils/interface";

const { useState } = React;

interface Props {
  fieldData: Field;
  onChange: (value: any) => void;
}

const OpenInnerFieldsModalButton: React.FC<Props> = (props) => {
  const [formVisible, setFormVisible] = useState(false);

  const [importVisible, setImportVisible] = useState(false);

  const content = (
    <Space direction="vertical">
      <Button onClick={() => setFormVisible(true)}>
        Modify InnerFields Manually
      </Button>
      <Button onClick={() => setImportVisible(true)}>Import JSON</Button>
    </Space>
  );

  return (
    <>
      <Popover content={content}>
        <Button>Operate</Button>
      </Popover>

      <InnerFieldsTree
        fieldData={props.fieldData}
        visible={formVisible}
        setVisible={setFormVisible}
        onChange={props.onChange}
      />

      <ImportJSONModal
        visible={importVisible}
        setVisible={setImportVisible}
        onChange={props.onChange}
      />
    </>
  );
};

export default OpenInnerFieldsModalButton;
